import { defineComponent, ref, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { MockDataGenerator } from '../utils/mockData'
import type { EChartsOption } from 'echarts'

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
])

export default defineComponent({
  name: 'Bar3DChart',
  components: {
    VChart
  },
  props: {
    title: {
      type: String,
      default: '产品销售统计'
    }
  },
  setup(props) {
    const chartData = MockDataGenerator.generateRegionData()

    const option = ref<EChartsOption>({
      title: {
        text: props.title,
        left: 'center',
        textStyle: {
          color: '#00ff88',
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#00ff88',
        borderWidth: 1,
        textStyle: {
          color: '#fff'
        }
      },
      grid: {
        left: '50',
        right: '30',
        top: '60',
        bottom: '30',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: chartData.map(d => d.name),
        axisLine: {
          lineStyle: {
            color: '#00ff88',
            width: 1
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.7)',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#00ff88',
            width: 1
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.7)'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 255, 136, 0.1)'
          }
        }
      },
      series: [
        {
          name: '销售额',
          type: 'bar',
          data: chartData.map(d => d.value),
          barWidth: '60%',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#00ff88' },
                { offset: 1, color: 'rgba(0, 255, 136, 0.3)' }
              ]
            },
            borderRadius: [8, 8, 0, 0],
            shadowColor: 'rgba(0, 255, 136, 0.5)',
            shadowBlur: 10
          },
          emphasis: {
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#00ffaa' },
                  { offset: 1, color: 'rgba(0, 255, 170, 0.5)' }
                ]
              },
              shadowColor: 'rgba(0, 255, 136, 0.8)',
              shadowBlur: 20
            }
          },
          label: {
            show: true,
            position: 'top',
            color: '#00ff88',
            fontSize: 12,
            fontWeight: 'bold',
            formatter: '{c}'
          }
        }
      ]
    })

    // 定时更新数据，创建动态效果
    onMounted(() => {
      setInterval(() => {
        const newData = MockDataGenerator.generateRegionData()
        option.value = {
          ...option.value,
          series: [{
            ...option.value.series![0] as any,
            data: newData.map(d => d.value)
          }]
        }
      }, 5000)
    })

    return () => (
      <div class="chart-container">
        <VChart option={option.value} autoresize style="height: 100%; width: 100%;" />
      </div>
    )
  }
})
